<template>
    <div class="login">
        <img class="main-img" src="@/assets/svgs/login-img.svg" alt="login" />
        <el-form class="login-form" ref="loginFormRef" :model="loginForm" :rules="rules">
            <h1>系统登录</h1>
            <el-form-item prop="username" size="large" style="margin-bottom: 30px">
                <el-input class="input" v-model="loginForm.username" placeholder="账号" :prefix-icon="UserFilled" />
            </el-form-item>
            <el-form-item prop="password" size="large" style="margin-bottom: 15px">
                <el-input v-model="loginForm.password" show-password placeholder="密码" :prefix-icon="Lock" />
            </el-form-item>
            <el-checkbox v-model="rememberUserName" label="记住用户名" style="margin-bottom: 15px" />
            <el-button :loading="isLoading" class="sub-btn" type="primary" @click="onSubmit(loginFormRef)">登 录</el-button>
            <el-divider content-position="center">其他登录方式</el-divider>
        </el-form>
    </div>
</template>

<script setup lang="ts">
    import { onMounted, reactive, ref } from 'vue'
    import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
    import { Lock, UserFilled } from '@element-plus/icons-vue'
    import { useRouter } from 'vue-router'
    import { useUserStore } from '@/stores/user'
    import { tr } from 'element-plus/es/locales.mjs'
    const router = useRouter()
    const userStore = useUserStore()
    const loginFormRef = ref<FormInstance>()
    const rememberUserName = ref(false)
    const isLoading = ref(false)
    const loginForm = reactive({
        username: localStorage.getItem('username') || '',
        password: ''
    })
    const rules = reactive<FormRules>({
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    })
    onMounted(() => {})

    const onSubmit = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        isLoading.value = true
        await formEl.validate(async (valid) => {
            if (!valid) {
                isLoading.value = false
                return
            }
            try {
                await userStore.toLogin(loginForm)
                await userStore.fetchUserInfo()
            } catch (error) {
                isLoading.value = false
                return
            }
            isLoading.value = false
            if (rememberUserName.value) {
                localStorage.setItem('username', loginForm.username)
            } else {
                localStorage.removeItem('username')
            }
            ElMessage.success('登录成功，欢迎您！')
            router.push({ path: '/' })
        })
    }
</script>

<style lang="scss" scoped>
    .login {
        height: 100vh;
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        // background-image: url('@/assets/svgs/login-bg.svg');
        background-repeat: no-repeat;
        background-size: cover;
        .main-img {
            width: 55%;
            padding-right: 6%;
        }
    }
    .login-form {
        width: 380px;
        padding: 30px;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);
        h1 {
            text-align: center;
            font-size: 28px;
            margin-bottom: 30px;
        }
        .sub-btn {
            width: 100%;
            height: 45px;
            margin-bottom: 10px;
        }
        .el-input__wrapper {
            font-size: 16px;
            padding: 6px 15px;
        }
    }
    /* 针对手机端的样式 */
    @media only screen and (max-width: 800px) {
        .login {
            .main-img {
                display: none;
            }
        }
    }
</style>
